<template>
	<view class="content">
		<!-- 背景图 -->
		<image class="img-bg" src="/static/images/bg.jpg"></image>
		<!-- logo -->
		<image class="img-logo" src="../../static/images/logo1.png">
		<!-- 表单 -->
		<!-- 用户 -->
		<view class="input-area">
			<image src="../../static/images/user.png"></image>
			<input type="text" placeholder="用户名/手机号" />
		</view>
		<!-- 密码 -->
		<view class="input-area-pwd">
			<image src="../../static/images/mima.png"></image>
			<input type="text" placeholder="密码" />
		</view>
		<!-- 登录 -->
		<view class="btn-login" hover-class="active">登录</view>
		<!-- 账户操作 -->
		<view class="account-area">
			<view hover-class="active">忘记密码?</view>
			<view hover-class="active">立即注册</view>
		</view>
		<!-- 第三方登录 -->
		<view class="bottom">
			<view>
			<view class="line"></view>	
			<view>第三方直接登录</view>	
			<view class="line"></view>	
			</view>
			<view>
			<view hover-class="active"><image src="../../static/images/qq.jpg"></image></view>
			<view hover-class="active"><image src="../../static/images/wx.jpg"></image></view>
			<view hover-class="active"><image src="../../static/images/wb.jpg"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.bottom{
	position: fixed;
	bottom: 150rpx;
	left: 0;
	right: 0;
	padding: 0 100rpx;
	>view:first-of-type{
		color:white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		>.line{
			height: 1px;
			background-color: white;
			width:150rpx
		}
	}
	>view:last-of-type{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		>view{
		>image{
			width: 80rpx;
			height:80rpx;
			border-radius: 50%;
		}	
		}
	}
}
.account-area{
	margin-top: 40rpx;
	z-index:1;
	display: flex;
	justify-content: space-between;
	view{
		text-decoration: underline;
		color: white;
	}
}
.active{
	opacity: 0.6;
}
.btn-login{
	background-color: orange;
	color:white;
	font-size: 1.2em;
	padding: 30rpx;
	border-radius: 8rpx;
	text-align: center;
	margin-top: 40rpx;
	z-index:1;
	letter-spacing: 20rpx;
}
.input-area-pwd{
	z-index:1;
	margin-top: 30rpx;
	background-color: white;
	padding: 10rpx;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	>image{
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
	}
	>input{
		// 把整个空间都占用  自动缩放
		flex:1;
		margin:20rpx;
	}
}
.input-area{
	z-index:1;
	margin-top: 100rpx;
	background-color: white;
	padding: 10rpx;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	>image{
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
	}
	>input{
		// 把整个空间都占用  自动缩放
		flex:1;
		margin:20rpx;
	}
}
.img-logo{
	background-color: white;
	align-self: center;
	width: 400rpx;
	height: 100rpx;
	margin-right: 100rpx;
	padding-left: 0rpx;
	border-radius: 7rpx;
}
.img-bg{
	position: fixed;
	z-index:0;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
}
.content{
	padding: 100rpx;
	display: flex;
	flex-direction: column;
}
</style>
